<template>
  <div id="problem-list">
    <a class="table-list">
      <el-tag type="danger">8</el-tag>
      <div class="di fr" style="width: 700px">
        <!-- 标题/作者 -->
        <div class="oa">
          <div class="title fl text-hidden">
            你好请问
          </div>
          <div class="auth fr">
            <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
            <span>zeng</span>
          </div>
        </div>
        <!-- 问题描述 -->
        <div class="oa detail">
          <div class="text-hidden fl">
            不知道
          </div>
          <div class="fr">
            2018/05/02
          </div>
        </div>
      </div>
    </a>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :page-size="page.pageSize"
      layout="prev, pager, next, jumper"
      :total="page.total" style="text-align: center;margin-bottom: 20px">
    </el-pagination>
  </div>
</template>


<!-- vue markdown ->> https://github.com/hinesboy/mavonEditor -->
<script lang="ts">
  import {Component, Model, Prop, Vue} from 'vue-property-decorator'

  @Component
  export default class list extends Vue {
    name = "index";
    isLogin: boolean = false;

    page = {
      pageSize: 100,
      total: 1000,
      currentPage: 1
    };

    created() {
    };

    mounted() {
    };
    handleSizeChange(val) {
    };

    handleCurrentChange(val) {
      this.page.currentPage = val;
    }
  }
</script>

<style lang="scss" scoped>

  @import "../../assets/scss/config";

  #problem-list {
    font-size: 14px;
    width: $middle-width;
    padding: 5px;
    .table-list {
      display: block;
      padding: 5px 10px;
      overflow: auto;
      border-bottom: 1px dotted #e4e6eb;
      transition: background-color .3s;
      &:hover {
        background: #f8faff;
      }
    }

    .el-tag.el-tag--danger {
      width: 50px;
      text-align: center
    }

    .di {
      display: inline-block;
    }

    .fr {
      float: right;
    }

    .fl {
      float: left;
    }

    .oa {
      overflow: auto;
    }

    .text-hidden {
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .title {
      width: 600px;
    }

    .detail {
      font-size: 12px;
      margin-top: 15px;
      color: #666;
    }

    .auth {
      font-size: 12px;
    }

  }


</style>
